<template>
  <div>
    <div style="height: 40%;position: relative">
      <el-table border highlight-current-row
                @row-click="upRowClick"
                :data="upData" height="calc(100% - 60px)" style="width: 100%">

        <el-table-column
            label="序号"
            width="60"
            align="center"
            header-align="center"
        >
          <!--          <template slot-scope="scope">{{(page - 1) * size + scope.$index + 1 }}</template>-->
        </el-table-column>
        <el-table-column
            label="时间"
            prop="shipCode"
            align="center"
            header-align="center"
        >
        </el-table-column>
        <el-table-column
            label="生成任务单"
            prop="billNo"
            align="center"
            header-align="center"
        >
        </el-table-column>
        <el-table-column
            label="履约号"
            prop="tradeNo"
            align="center"
            header-align="center"
        >
        </el-table-column>
        <el-table-column
            prop="deptName"
            label="部门"
            align="center"
            header-align="center"
        >

        </el-table-column>
        <el-table-column
            label="备注"
            align="center"
            prop="memo"
            header-align="center"
        >
        </el-table-column>


      </el-table>
      <el-pagination
          class="pagination-bottom pagination-fr"
          style="text-align: right"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page.sync="searchData.pageNum"
          :page-size="searchData.pageSize"
          :page-sizes="[15, 30, 50, 100]"
          layout="sizes,total, prev, pager, next, jumper"
          :total="searchData.total"
      >
      </el-pagination>

    </div>
    <div class="wrap" style="margin-top: 10px;height:calc(60% - 10px)">
      <div style="width: 50%">
        <div>
          <el-radio-group style="margin-left: 80%" v-model="leftType" @change="switchTable">
            <el-radio-button :label="0">全部项</el-radio-button>
            <el-radio-button :label="1">借料项</el-radio-button>
          </el-radio-group>
        </div>
        <el-table height="calc(100% - 50px)"
                  ref="sestion"
                  @row-click="leftRowClick"
                  @selection-change="handleSelectionChange"
                  border highlight-current-row :data="leftData" style="width: 100%">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column
              label="任务单号"
              prop="billNo"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="投料单号"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="物料名称"
              prop="itemName"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="规格型号"
              prop="spec"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="供应商"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              prop="orderQuantity"
              label="计划数量"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              prop="marginQty"
              label="已出库数量"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="差异"
              align="center"
              header-align="center"
          >
            <template slot-scope="scope">
            <span>{{
                !((scope.row.orderQuantity - scope.row.marginQty) > 0) ? 0 : (scope.row.orderQuantity - scope.row.marginQty)
              }}</span
            >
            </template>

          </el-table-column>


        </el-table>
      </div>
      <div style="width: 49%">
        <div style="margin-left: 30%">
          借料数量{{ rawNumber }}/{{ allNumber }}
        </div>
        <div style="margin-left: 80%">

          <el-button type="primary" size="mini">可借料项</el-button>
          <el-button @click="submitQitao" type="primary"
                     :disabled="isFreezeBtn"
                     size="mini">提交
          </el-button>
        </div>
        <el-table height="calc(100% - 50px)" border highlight-current-row :data="rightData" style="width: 100%">
          <el-table-column
              label="任务单号"
              prop="billNo"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="投料单号"
              prop="orderBillNo"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="物料名称"
              prop="itemName"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="规格型号"
              prop="itemModel"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              label="供应商"
              prop="supplierName"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <el-table-column
              prop="qcQty"
              label="数量"
              align="center"
              header-align="center"
          >
          </el-table-column>
          <!--          <el-table-column-->
          <!--              label="差异"-->
          <!--              align="center"-->
          <!--              header-align="center"-->
          <!--          >-->
          <!--            <template slot-scope="scope">-->
          <!--            <span>{{ scope.row.orderQuantity - scope.row.pickQuantity  }}</span-->
          <!--            >-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
              label="借料数量"
              align="center"
              header-align="center"
          >

            <template slot-scope="scope">
              <el-input
                  v-model="scope.row.number"
                  type="number"
                  @change="onInputChange(scope.row)"
              >
              </el-input>
            </template>


            <!--            <template slot-scope="scope">-->
            <!--              <span v-if="scope.$index !== nowIndex" class="el-span-box" @dblclick.stop="editInput(scope.$index)" v-text="scope.row.varietyNumber" />-->
            <!--              <input v-if="scope.$index == nowIndex" style="text-align:center;width:100%" min="0"   v-focus autofocus v-model="rightData[nowIndex].varietyNumber" type="number" @blur.prevent="blurFn(scope.$index)">-->
            <!--              <template slot-scope="scope">-->


          </el-table-column>

        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AnionSet",
  data() {
    // 校验规则
    return {
      // 用作查询的数据
      searchData: {
        // 仓库编码 获得当前仓库的编码
        wareId: PF.getLocal("wareId", "number"),
        pageNum: 1,
        pageSize: 10,
        total: null,
        nowIndex: null,
        // 批次号查询
        batchName: ""
      },
      leftType: 0,
      upData: [],
      leftData: [],
      leftAllData: [],
      leftLendData: [],
      tableSelection: [],
      rightData: [],
      flag: false,
      rawNumber: 0,
      allNumber: 0,
      nowIndex: null,
      billNo: '',
      soDetailVo: {
        all: [],
        pickTaskVos: []
      }
    };
  },
  computed: {
    isFreezeBtn() {
      if (this.tableSelection.length === 1 &&this.leftType===1) {
        return false;
      } else {
        return true;
      }
    },


  },

  watch: {
    //
  },
// 页面加载时刷新
  //TODO  created会失效
  //   1、router-view路由跳转使用keep-alive方式
  // 2、created和mounted只执行一次
  // 3、使用activated钩子，每次进入页面执行一次
  // TODO 解决方案 :1、将要处理的方法，放在activated函数中
  activated() {
    this.searchData.pageNum = 1;
    this.searchData.pageSize = 10;
    //请求数据
    this.initListData();
  },
  methods: {
    onInputChange(row) {
      this.rawNumber = 0;
      for (const rowKey in this.rightData) {
        if (this.rightData[rowKey].number) {
          this.rawNumber += Number(this.rightData[rowKey].number);
        }
      }
    },

    //分页设置每页的条数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.initListData();
    },
    //分页设置从第几条开始
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.initListData();
    },
    // 创建查询条件批次号
    clearSearchData() {
      this.searchData.batchName = "";
    },

    //借料项全部项切换
    switchTable() {
      console.log(this.leftType, "this.leftType")
      if (this.leftType === 0) {
        this.leftData = this.leftAllData;
      } else {
        this.leftData = this.leftLendData;
      }
    },
    //双击事件
    editInput(row) {
      this.nowIndex = row
      this.flag = true
    },

    submitQitao() {


      console.log(this.tableSelection, "this.tableSelection");
      console.log(this.rightData, "this.rightData");

      this.soDetailVo.all = this.tableSelection;
      this.soDetailVo.billOutDetailBOS = this.rightData;
      console.log("this.soDetailVo", this.soDetailVo)
      IOT.getServerData('/so/masters/submitQitao', 'post', this.soDetailVo, (ret) => {
        if (ret.code === 200) {
          this.rightData = null;
          IOT.tips('保存成功！', 'success', 1000, () => {
            this.leftData = null;
            this.leftTabeDate(this.billNo);
            console.log(this.rightData, 'this.rightData')
          });
        } else {
          IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
        }
      });

    },
    upRowClick(row, column, event) {
      this.billNo = row.billNo;
      console.log(row, "row")
      this.rawNumber = 0;
      this.allNumber = 0;
      this.leftData = null;
      this.rightData = null;
      this.leftTabeDate(this.billNo);
    },

    leftTabeDate(billNo) {
      IOT.getServerData("/so/details/findALl", "get", {billNo: billNo}, ret => {
        if (ret.code === 200) {
          // rows就是返回的数据
          // console.log(ret);
          this.leftAllData = ret.data.all;
          this.leftLendData = ret.data.lend;
          this.switchTable()

        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }

      }, true);
    },
    //左边行选择
    leftRowClick(row, column, event) {
      //清空
      this.$refs.sestion.clearSelection()
      //添加
      this.$refs.sestion.toggleRowSelection(row)

      this.rawNumber = 0;
      this.allNumber  = (row.orderQuantity - row.marginQty)<=0?0:(row.orderQuantity - row.marginQty)

      IOT.getServerData("/so/details/beBeing", "get", {billNo: row.billNo, itemCode: row.itemCode}, ret => {
        if (ret.code === 200) {
          this.rightData = ret.data
          console.log(this.rightData, "retretretretret");
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }

      }, true);


    },


    handleSelectionChange(val) {
      this.tableSelection = val;
      console.log(this.tableSelection, 'valvalval');
    },
    initListData() {
      IOT.getServerData("/so/masters/alignList", "get", this.searchData, ret => {
        if (ret.code === 200) {
          // rows就是返回的数据
          // console.log(ret);
          console.log(ret.rows, "ret.rows")
          this.upData = ret.rows;
          this.searchData.total = ret.total;
          this.searchData.pageNum = ret.pageNumber;
        } else {
          IOT.tips(ret.message || "服务器请求失败，稍后再试！", "error");
        }
      });

    }
  }
};
</script>

<style scoped>
.wrap {
  display: flex;
  justify-content: space-between;
}

.pagination-fr {
  position: absolute !important;
  bottom: 5px;
  right: 10px;
}

.el-span-box {
  float: left;
  width: 100%;
  height: 100%;
  /*background-color: #000;*/
  min-height: 30px;
}
</style>
